<template>
  <div class="red">
    <div class="item">
      <div class="bg">
        <img src="../../assets/img/mine/red.png" alt="">
      </div>
      <div class="box">
        <div class="box-l">
          <div class="l-l"><span>￥</span>4</div>
          <ul class="l-r">
            <li class="l1">天健医网</li>
            <li class="l2"><span></span> 满30元可以</li>
            <li class="l3"><span></span> 2019-10-14至2019-10-15</li>
          </ul>
        </div>  
        <div class="box-r">
          去使用
        </div>
      </div>
    </div>
    <div class="item">
      <div class="bg">
        <img src="../../assets/img/mine/sxred.png" alt="">
      </div>
      <div class="box">
        <div class="box-l">
          <div class="l-l"><span>￥</span>4</div>
          <ul class="l-r">
            <li class="l1">天健医网</li>
            <li class="l2"><span></span> 满30元可以</li>
            <li class="l3"><span></span> 2019-10-14至2019-10-15</li>
          </ul>
        </div>  
        <div class="lose">
          去使用
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        
      }
    },
    methods: {
      
    },
  }
</script>

<style scoped>
.red{
  width: 100%;
  border-top:1PX solid #EFEFEF;
  min-height: 100vh;
  background: #F8F8F8;
}
.item{
  width: 702px;
  height: 199px;
  position: relative;
  margin: auto;
  margin-top: 30px;
}
.item .bg{
  width: 702px;
  height: 199px;
  position: absolute;
  left: 0;
  bottom: 0;
}
.bg img{
  width: 702px;
  height: 199px;
}
.box{
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 702px;
  height: 199px;
}
.box-l{
  display: flex;
  align-items: center;
  margin-left: 30px;
}
.l-l{
  font-size: 50px;
  color: #e7673a;
}
.l-l span{
  font-size: 26px;
  margin-right: 10px;
}
.l-r{
  margin-left: 54px;
}
.l-r .l1{
  font-size: 32px;
  color: #333;
}
.l-r .l2{
  margin-top: 13px;
  margin-bottom: 10px;
}
.l-r .l2,.l-r .l3{
  font-size: 24px;
  color: #666;
}
.l-r .l2 span,.l-r .l3 span{
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4D4D4D;
  margin-bottom: 5px;
}
.box-r{
  width: 89px;
  height: 41px;
  border-radius: 21px;
  border: 2px solid #06a255;
  font-size: 24px;
  color: #06a255;
  line-height: 41px;
  text-align: center;
  margin-right: 30px;
}
.lose{
  width: 89px;
  height: 41px;
  border-radius: 21px;
  border: 2px solid #ccc;
  font-size: 24px;
  color: #ccc;
  line-height: 41px;
  text-align: center;
  margin-right: 30px;
}
</style>